/**--------------------------------------- 总统计 -------------------------------------*/
function chart_all(data_list) {
    let base = new Date(2019, 9, 31);
    let oneDay = 24 * 3600 * 1000;
    let date = [];
    let data = data_list;
    let today = new Date();
    alert(today.getDate());
    let daysdiff = Math.abs((today.getTime() - base.getTime()));
    let days = Math.ceil(daysdiff / oneDay);
    // alert(days);
    // alert(base);
    // alert(today.getTime());
    // let start  = new Date(base);
    // date.push([start.getFullYear(), start.getMonth(), start.getDate()].join('/'));
    // alert([start.getFullYear(), start.getMonth(), start.getDate()].join('/'));
    date.push('2019/10/31');
    let bases = base.getTime();
    for (let i = 0; i <= days; i++) {

        let now = new Date((bases += oneDay));

        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
    }
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                snap: true
            },
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
        },
        yAxis: {
            type: 'value'
        },
        dataZoom: [{
            type: 'inside',
            start: 0,
            end: 10
        }, {
            start: 0,
            end: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }],
        series: [
            {
                name: '黑广播数量',
                type: 'line',
                smooth: true,
                symbol: 'none',
                sampling: 'average',
                itemStyle: {
                    color: 'rgb(255, 70, 131)'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(255, 158, 68)'
                    }, {
                        offset: 1,
                        color: 'rgb(255, 70, 131)'
                    }])
                },
                data: data
            }
        ]
    };
    let myChart = echarts.init(document.getElementById('chart_all'));
    myChart.setOption(option);
}

/**-------------------------------------- 年统计 --------------------------------------*/
var YearCount;

function chart_year(year_count) {
    let chart = echarts.init(document.getElementById('chart_year'));
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}条 ({d}%)'
        },
        series: [
            {
                name: '黑广播占比',
                type: 'pie',
                // showSymbol:false,
                radius: '80%',
                center: ['50%', '50%'],
                data: [
                    {value: year_count[0], name: '一月'},
                    {value: year_count[1], name: '二月'},
                    {value: year_count[2], name: '三月'},
                    {value: year_count[3], name: '四月'},
                    {value: year_count[4], name: '五月'},
                    {value: year_count[5], name: '六月'},
                    {value: year_count[6], name: '七月'},
                    {value: year_count[7], name: '八月'},
                    {value: year_count[8], name: '九月'},
                    {value: year_count[9], name: '十月'},
                    {value: year_count[10], name: '十一月'},
                    {value: year_count[11], name: '十二月'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        // shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    show: false
                }
            }
        ],
        color: ['#C23531', '#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A']
    };
    chart.setOption(option);
    // cahrt2.setOption(option);
    YearCount = year_count;
}

/**细节 */
function ChartYearDetail() {
    let chart = echarts.init(document.getElementById('chart_year2'));
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}条 ({d}%)'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            data: LegendToolYear(YearCount),
            left: 2,
            top: 'auto',
            bottom: 'auto'
        },
        series: [
            {
                name: '黑广播占比',
                type: 'pie',
                // showSymbol:false,
                radius: '80%',
                center: ['60%', '50%'],
                data: DataToolYear(YearCount),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        // shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    position: 'outside',
                    formatter: '{b}:{d}'
                }
            }
        ],
        color: ['#C23531', '#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A']
    };
    chart.setOption(option);
}

/**工具 */
function DataToolYear(YearCount) {
    let content = [];
    for (let item in YearCount) {
        if (!YearCount.hasOwnProperty(item)) continue;
        if (YearCount[item] === 0) {
        } else {
            content.push({
                value: YearCount[item],
                name: String(Number(item) + 1) + '月',
                label: {
                    position: 'outside',
                    smooth: true,
                    formatter: "{b}:{d}%",
                    alignTo: 'labelLine'
                },
                labelLine: {
                    length2: 35
                }

            })
        }
    }
    return content;
}

function LegendToolYear(YearCount) {
    let content = [];
    for (let item in YearCount) {
        if (!YearCount.hasOwnProperty(item)) continue;
        content.push(String(Number(item) + 1) + '月');
    }
    return content;
}

/**-------------------------------------- 月统计 --------------------------------------*/
var MonthCount;

function chart_month(month_count) {
    let chart = echarts.init(document.getElementById('chart_month'));
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}条 ({d}%)'
        },
        series: [
            {
                name: '黑广播占比',
                type: 'pie',
                radius: '80%',
                center: ['50%', '50%'],
                data: [
                    {value: month_count[0], name: '本月1日'},
                    {value: month_count[1], name: '本月2日'},
                    {value: month_count[2], name: '本月3日'},
                    {value: month_count[3], name: '本月4日'},
                    {value: month_count[4], name: '本月5日'},
                    {value: month_count[5], name: '本月6日'},
                    {value: month_count[6], name: '本月7日'},
                    {value: month_count[7], name: '本月8日'},
                    {value: month_count[8], name: '本月9日'},
                    {value: month_count[9], name: '本月10日'},
                    {value: month_count[10], name: '本月11日'},
                    {value: month_count[11], name: '本月12日'},
                    {value: month_count[12], name: '本月13日'},
                    {value: month_count[13], name: '本月14日'},
                    {value: month_count[14], name: '本月15日'},
                    {value: month_count[15], name: '本月16日'},
                    {value: month_count[16], name: '本月17日'},
                    {value: month_count[17], name: '本月18日'},
                    {value: month_count[19], name: '本月19日'},
                    {value: month_count[20], name: '本月20日'},
                    {value: month_count[21], name: '本月21日'},
                    {value: month_count[22], name: '本月22日'},
                    {value: month_count[23], name: '本月23日'},
                    {value: month_count[24], name: '本月24日'},
                    {value: month_count[25], name: '本月25日'},
                    {value: month_count[26], name: '本月26日'},
                    {value: month_count[27], name: '本月27日'},
                    {value: month_count[28], name: '本月28日'},
                    {value: month_count[29], name: '本月29日'},
                    {value: month_count[30], name: '本月30日'},
                    {value: month_count[31], name: '本月31日'},
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    show: false
                }
            }
        ],
        color: ['#C23531', '#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A']
    };
    chart.setOption(option);
    MonthCount = month_count;
}

/**详细 */
function ChartMonthDetil() {
    let chart = echarts.init(document.getElementById('chart_month2'));
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}条 ({d}%)'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            data: LegendToolMonth(MonthCount),
            left: 2,
            top: 'auto',
            bottom: 'auto'
        },
        series: [
            {
                name: '黑广播占比',
                type: 'pie',
                radius: '65%',
                center: ['60%', '50%'],
                data: DataToolMonth(MonthCount),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
            }
        ],
        color: ['#C23531', '#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A']
    };
    chart.setOption(option);
}

/**处理数据工具 */
function DataToolMonth(MonthCount) {
    let content = [];
    // alert(MonthCount[8]==0);
    for (let item in MonthCount) {
        if (!MonthCount.hasOwnProperty(item)) continue;
        if (MonthCount[item] === 0) {
        } else {
            content.push({
                value: MonthCount[item],
                name: '每月' + String(Number(item) + 1) + '日',
                label: {
                    position: 'outside',
                    smooth: true,
                    formatter: "{b}:{d}%",
                    alignTo: 'labelLine'
                },
                labelLine: {
                    length2: 35
                }
            })
        }
    }
    return content;
}

function LegendToolMonth(MonthCount) {
    let content = [];
    for (let item in MonthCount) {
        if (!MonthCount.hasOwnProperty(item)) continue;
        content.push('每月' + String(Number(item) + 1) + '日')
    }
    return content;
}

/**-------------------------------------- 日统计 --------------------------------------*/
var DayCount;

function chart_day(day_count) {
    let chart = echarts.init(document.getElementById('chart_day'));
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}条 ({d}%)'
        },
        series: [
            {
                name: '黑广播占比',
                type: 'pie',
                radius: '80%',
                center: ['50%', '50%'],
                data: [
                    {value: day_count[0], name: '00:00-01:00'},
                    {value: day_count[1], name: '01:00-02:00'},
                    {value: day_count[2], name: '02:00-03:00'},
                    {value: day_count[3], name: '03:00-04:00'},
                    {value: day_count[4], name: '04:00-05:00'},
                    {value: day_count[5], name: '05:00-06:00'},
                    {value: day_count[6], name: '06:00-07:00'},
                    {value: day_count[7], name: '07:00-08:00'},
                    {value: day_count[8], name: '08:00-09:00'},
                    {value: day_count[9], name: '09:00-10:00'},
                    {value: day_count[10], name: '10:00-11:00'},
                    {value: day_count[11], name: '11:00-12:00'},
                    {value: day_count[12], name: '12:00-13:00'},
                    {value: day_count[13], name: '13:00-14:00'},
                    {value: day_count[14], name: '14:00-15:00'},
                    {value: day_count[15], name: '15:00-16:00'},
                    {value: day_count[16], name: '16:00-17:00'},
                    {value: day_count[17], name: '17:00-18:00'},
                    {value: day_count[18], name: '18:00-19:00'},
                    {value: day_count[19], name: '19:00-20:00'},
                    {value: day_count[20], name: '20:00-21:00'},
                    {value: day_count[21], name: '21:00-22:00'},
                    {value: day_count[22], name: '22:00-23:00'},
                    {value: day_count[23], name: '23:00-24:00'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    show: false
                }
            }
        ],
        color: ['#C23531', '#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A']
    };
    chart.setOption(option);
    DayCount = day_count;
}

/**详细 */
function ChartDayDetil() {
    let chart = echarts.init(document.getElementById('chart_day2'));
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}条 ({d}%)'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            data: LegendToolDay(DayCount),
            left: 2,
            top: 'auto',
            bottom: 'auto'
        },
        series: [
            {
                name: '黑广播占比',
                type: 'pie',
                radius: '80%',
                center: ['50%', '60%'],
                data: DataToolDay(DayCount),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ],
        color: ['#C23531', '#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A']
    };
    chart.setOption(option)
}

/**图表工具 */
function DataToolDay(DayCount) {
    let content = [];
    for (let item in DayCount) {
        if (!DayCount.hasOwnProperty(item)) continue;
        let start = item > 9 ? String(item) + ':00' : '0' + String(item) + ':00';
        let end = item + 1 > 9 ? String(Number(item) + 1) + ':00' : '0' + String(Number(item) + 1) + ':00';
        if (DayCount[item] === 0) {
        } else {
            content.push({
                value: DayCount[item],
                name: start + '-' + end,
                label: {
                    position: 'outside',
                    smooth: true,
                    formatter: "{b}({d}%)",
                    alignTo: 'labelLine'
                },
                labelLine: {
                    length2: 35
                }
            })
        }
    }
    return content;
}

function LegendToolDay(DayCount) {
    let content = [];
    for (let item in DayCount) {
        if (!DayCount.hasOwnProperty(item)) continue;
        let start = item > 9 ? String(item) + ':00' : '0' + String(item) + ':00';
        let end = item + 1 > 9 ? String(Number(item) + 1) + ':00' : '0' + String(Number(item) + 1) + ':00';
        content.push(start + '-' + end)
    }
    return content;
}

/**-------------------------------------- 分类统计 ------------------------------------*/
function chart_category(category) {
    let chart = echarts.init(document.getElementById('chart_category'));
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}条 ({d}%)'
        },
        series: [
            {
                name: '黑广播占比',
                type: 'pie',
                radius: '60%',
                center: ['55%', '50%'],
                data: DataToolCategory(category),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                // label: {
                //     show: false
                // }
            }
        ],
        color: ['#C23531', '#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A'],
        legend: {
            type: 'scroll',
            orient: 'vertical',
            data: '',
            left: 2,
            top: 'auto',
            bottom: 'auto'
        }
    };
    chart.setOption(option, true)
}

function DataToolCategory(category) {
    // let content = new Array;
    for (let item in category) {
        if (!category.hasOwnProperty(item)) continue;
        // alert(item);
        // alert(category[item].name);
        if (category[item].value !== 0) {

            category[item].label = {
                position: 'outside',
                smooth: true,
                formatter: '{b}({d}%)',
                alignTo: 'labelLine'
            }
            // alert(category[item].label.smooth);
        } else {
            category[item].label = {
                show: false,
                position: 'inside'
            }
        }
    }
    return category;
}

/**-------------------------------------- axios --------------------------------------*/
axios
    .get('/d/broadcast/chart')
    .then(function (response) {
        let data_list = response.data.data_list;
        let year_count = response.data.year_count;
        let month_count = response.data.month_count;
        let day_count = response.data.day_count;
        let category = response.data.category;
        chart_all(data_list);
        chart_year(year_count);
        chart_month(month_count);
        chart_day(day_count);
        chart_category(category);
    });